@media screen and (max-width:599px) {
  :root {
    /* 모바일 display 티어 캡 — library.css 모바일 :root 가 누락한 display 토큰 보강 */
    --displayXL: var(--size-45);
    --displayL: var(--size-42);
    --displayM: var(--size-40);
    --displayS: var(--size-36);
  }

  section img {
    width: 100%;
  }

  /* ============================================================
   * 섹션별 모바일 재정의 (프로젝트별 작성 — 골격)
   *   PC 흐름 레이아웃을 .mob-col 등으로 재배치하고, 토큰(--size-N)은
   *   library.css 의 모바일 @media :root 에서 vw 로 일괄 override 됨.
   *   absol → 흐름 전환 시 좌표 리셋(left/top/right/bottom:auto + transform:none) 주의.
   *   상세: /mobile-workflow 스킬 참조.
   * ============================================================ */

  /* ===== intro (메인 splash): PC 좌우 2분할 → 모바일 상하 2분할(각 50vh) ===== */
  .intro {
    flex-direction: column;
  }

  /* 각 패널 width 100% (height 는 flex:1 → 50vh) */
  .intro__panel {
    width: 100%;
  }

  /* --- 카피: 패널 상단 중앙 정렬 (PC absol 좌표 리셋) --- */
  .intro__panel--brand .intro__copy,
  .intro__panel--fran .intro__copy {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    text-align: center;
  }

  /* 타이틀: PC 토큰(displayM) 유지 — 모바일 :root 캡(40px)이 자동 처리, FRANCHISE 9자 수용 */

  /* 뱃지(브랜드/프랜차이즈 텍스트 이미지): 타이틀 하단 중앙. 좌패널 뱃지도 상시 노출(PC hover 토글 제거) */
  .intro__badge {
    top: 9vw;
  }

  .intro__badge img {
    width: 26vw !important;
    height: auto !important;
  }

  .intro__badge--brand {
    display: block;
  }

  /* 서브카피: 뱃지 아래 간격 통일 (PC 상태별 2.1/4.4rem 무력화) */
  .intro__sub,
  .intro__panel--fran .intro__sub {
    margin-top: 8vw;
  }

  /* 카피 가독성: 풀-블리드 이미지 위 오버레이라 텍스트 그림자로 대비 확보 (shadow=raw px 예외 허용) */
  /* BRAND=네이비 텍스트라 치킨 접시 위 대비 약함 → 이중 흰 할로로 강화 */
  .intro__panel--brand .intro__title,
  .intro__panel--brand .intro__sub {
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95), 0 0 16px rgba(255, 255, 255, 0.9);
  }

  .intro__panel--fran .intro__title,
  .intro__panel--fran .intro__sub {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  }

  /* --- 디쉬: BRAND 패널 풀-블리드 cover (사용자: 꽉차게). 카피 위 오버레이 --- */
  .intro__dish {
    inset: 0;
    transform: none;
  }

  .intro__dish img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* --- 매장: FRANCHISE 하단 그라운딩, 더 작게 (사용자: 더 아래로/작게). 네이비 격자 위 --- */
  .intro__store {
    top: auto;
    bottom: -13vw;
    left: auto;
    right: 0;
    transform: none;
  }

  .intro__store img {
    width: 100vw !important;
    height: auto !important;
  }

  /* 배경 이미지 오버레이 — 카피 가독성 (카피 z-index:2 > 이미지 z-index:1 이라 카피는 오버레이 위).
     BRAND=네이비 텍스트→밝게(흰), FRANCHISE=흰 텍스트→딤(검정) */
  .intro__dish::after,
  .intro__store::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .intro__dish::after {
    background: rgba(255, 255, 255, 0.3);
  }

  .intro__store::after {
    background: rgba(0, 0, 0, 0.3);
  }

  /* --- 중앙 divider: 모바일 미노출 (사용자 지시) --- */
  .intro__divider {
    display: none;
  }

  /* ============================================================
   * 서브 공통: 서브 히어로 + 앵커 탭바 (전 subNN 공유 — library.css 컴포넌트 모바일 변환)
   *   PC 헤더 11rem → 모바일 헤더 15vw 기준으로 위치 재정렬.
   *   폰트(eyebrow bodyL / title displayM)는 토큰 유지 → 모바일 :root 자동 vw 재매핑.
   * ============================================================ */

  /* 히어로: 헤더(15vw) 아래로 내리고 높이 축소. 배경 cover */
  .sub-hero {
    height: 40vw;
    margin-top: 15vw;
  }

  /* 배경 cover 강제 — ImgResize 인라인 width 무력화 */
  .sub-hero__bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* 앵커 탭바: 가로 스크롤 1줄 (탭 넘치면 좌우 스크롤) */
  .tabnav--hero {
    top: 15vw;
    width: 90vw;
    height: 13vw;
    margin: -6vw auto -7vw;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 4vw;
    box-sizing: border-box;
  }

  .tabnav--hero::-webkit-scrollbar {
    display: none;
  }

  /* 헤더 접힘(insert)/펼침(drop) 동기 — 모바일 헤더 높이 기준 */
  .tabnav--hero.insert {
    top: 0;
  }

  .tabnav--hero.drop {
    top: 15vw;
  }

  /* 리스트: 한 줄 nowrap. 탭 적어 스크롤 없으면 중앙정렬(min-width:100% 폭 안에서 center), 넘치면 max-content 가 100% 초과해 center 무효→좌측시작+스크롤 */
  .tabnav__list {
    flex-wrap: nowrap;
    flex-shrink: 0;          /* max-content 폭 유지(축소 금지) — 없으면 100%로 줄어 nowrap 항목이 양옆 넘쳐 잘림 */
    justify-content: center;
    box-sizing: border-box;  /* padding 을 폭에 포함 — 없으면 content-box 라 max-content/min-width 에 padding 이 더해져 컨테이너 미세초과→center 무효(우측 쏠림) */
    width: max-content;
    min-width: 100%;
    gap: 6vw;
    padding: 0 5vw;
  }

  /* 링크: 줄바꿈 금지 (세로 중앙은 nav align-center 가 처리) */
  .tabnav__link {
    white-space: nowrap;
  }

}